import 'dart:io';

import 'package:extended_image/extended_image.dart';
import 'package:flutter/material.dart';

import 'PreViewPage.dart';
import 'utils.dart';

class EditPage extends StatefulWidget {
  var data;
  EditPage(this.data);

  @override
  _EditPageState createState() => _EditPageState();
}

class _EditPageState extends State<EditPage> {
  double _aspect = null;
  int currentSelect = 0;
  final GlobalKey<ExtendedImageEditorState> editorKey =
      GlobalKey<ExtendedImageEditorState>();

  editDone() async {
    //得到裁剪框cropImageDataWithNativeLibrary
    final Rect cropRect = editorKey.currentState.getCropRect();
    var img =
        await cropImageDataWithNativeLibrary(state: editorKey.currentState);
    Navigator.push(
      context,
      MaterialPageRoute(builder: (_) => PreViewPage(img)),
    );
  }

  selectAspect({int index, String text}) {
    return FlatButton(
      textColor: currentSelect == index ? Colors.white : Color(0xff334455),
      onPressed: () {
        currentSelect = index;
        setState(() {
          switch (index) {
            case 0:
              _aspect = null;
              break;
            case 1:
              _aspect = 4 / 3;
              break;
            case 2:
              _aspect = 16 / 9;
              break;
            case 3:
              _aspect = 9 / 16;
              break;
            case 4:
              _aspect = 1 / 1;
              break;
          }
        });
      },
      child: Text(
        text,
      ),
      color: currentSelect == index ? Color(0xff334455) : Color(0xffffffff),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Color(0xff335566),
        elevation: 0,
        leading: IconButton(
          highlightColor: Colors.transparent,
          splashColor: Colors.transparent,
          icon: Icon(Icons.close_rounded),
          onPressed: () => Navigator.pop(context),
        ),
        actions: [
          GestureDetector(
            child: Container(
                padding: EdgeInsets.all(10), child: Icon(Icons.check)),
            onTap: editDone,
          )
        ],
      ),
      body: Stack(
        alignment: Alignment.bottomCenter,
        children: [
          ExtendedImage.file(
            File(widget.data.path),
            fit: BoxFit.contain,
            mode: ExtendedImageMode.editor,
            extendedImageEditorKey: editorKey,
            initEditorConfigHandler: (state) {
              return EditorConfig(
                  maxScale: 8.0,
                  cropRectPadding: EdgeInsets.all(10.0),
                  hitTestSize: 20.0,
                  // initCropRectType: InitCropRectType.layoutRect,
                  cropAspectRatio: _aspect);
            },
          ),
          Container(
              margin: EdgeInsets.symmetric(vertical: 20),
              child: SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                physics: BouncingScrollPhysics(),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    SizedBox(
                      width: 10,
                    ),
                    selectAspect(
                      index: 0,
                      text: "Free",
                    ),
                    SizedBox(
                      width: 10,
                    ),
                    selectAspect(
                      index: 1,
                      text: "4:3",
                    ),
                    SizedBox(
                      width: 10,
                    ),
                    selectAspect(
                      index: 2,
                      text: "16:9",
                    ),
                    SizedBox(
                      width: 10,
                    ),
                    selectAspect(
                      index: 3,
                      text: "9:16",
                    ),
                    SizedBox(
                      width: 10,
                    ),
                    selectAspect(
                      index: 4,
                      text: "1:1",
                    ),
                    SizedBox(
                      width: 10,
                    ),
                  ],
                ),
              )),
        ],
      ),
      bottomNavigationBar: BottomAppBar(
          elevation: 0,
          child: SingleChildScrollView(
            physics: BouncingScrollPhysics(),
            scrollDirection: Axis.horizontal,
            child: Row(
              children: [
                FlatButtonWidthIcon(
                  icon: Icons.flip,
                  text: "Flip",
                  onPress: flip,
                ),
                FlatButtonWidthIcon(
                  icon: Icons.rotate_left_rounded,
                  text: "RoateL",
                  onPress: roateLeft,
                ),
                FlatButtonWidthIcon(
                  icon: Icons.rotate_right_rounded,
                  text: "RoateR",
                  onPress: roateRight,
                ),
                FlatButtonWidthIcon(
                  icon: Icons.restore,
                  text: "Reset",
                  onPress: reset,
                ),
              ],
            ),
          )),
    );
  }


  flip() {
    editorKey.currentState.flip();
  }

  roateLeft() {
    editorKey.currentState.rotate(right: false);
  }

  roateRight() {
    editorKey.currentState.rotate();
  }

  reset() {
    editorKey.currentState.reset();
  }
}

class FlatButtonWidthIcon extends StatelessWidget {
  var icon;
  var text;
  var onPress;

  FlatButtonWidthIcon({this.icon, this.text, this.onPress});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onPress,
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 32, vertical: 10),
        child: SingleChildScrollView(
          child: Column(
            children: [
              Icon(icon),
              SizedBox(
                height: 2,
              ),
              Text(
                text,
                style: TextStyle(fontWeight: FontWeight.w500),
              )
            ],
          ),
        ),
      ),
    );
  }
}
